<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品分类">
                <a-input allow-clear placeholder="请输入分类名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="$refs.table.refresh(1)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="$refs.table.refresh(1)">
          <a-radio-button value="0"> 全部 </a-radio-button>
          <a-radio-button value="1"> 已开启 </a-radio-button>
          <a-radio-button value="2"> 已禁用 </a-radio-button>
        </a-radio-group>
        <div>
          <a-button type="primary" @click="showEditCat = true" icon="plus">新建</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="allStatus('1')">批量显示</a-menu-item>
              <a-menu-item @click="allStatus('0')">批量禁用</a-menu-item>
              <a-menu-item @click="allStatus('2')">批量删除</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div>
      </div>
      <s-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :rowSelection="{
          selectedRowKeys: this.selectedRowKeys,
          onChange: (e) => {
            selectedRowKeys = e
          },
        }"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
        <span slot="created_at" slot-scope="text">
          {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>
        <div slot="status" slot-scope="scope">
          <div class="status">
            <span :class="scope == 0 ? 'disabled' : 'open'"></span>
            <span>{{ scope == 0 ? '已禁用' : '已启用' }}</span>
          </div>
        </div>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="handleEdit(record)" size="small">编辑</a-button>
          <a-divider type="vertical" style="margin: 0 1px" />
          <a-dropdown>
            <a-button type="link" size="small"> 更多 <a-icon type="down" /></a-button>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm
                  title="确认显示吗？"
                  @confirm="changeCatStatus({ids:[record.id], status:'1'})"
                  :disabled="record.is_enable == 1"
                >
                  <a-button type="link" size="small" :disabled="record.is_enable == 1">启用</a-button>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确认禁用吗？"
                  @confirm="changeCatStatus({ids:[record.id], status:'0'})"
                  :disabled="record.is_enable == 0"
                >
                  <a-button type="link" size="small" :disabled="record.is_enable == 0">禁用</a-button>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确认删除账户吗？" @confirm="deleteCat({ids:[record.id]})">
                  <a-button type="link" size="small">删除</a-button>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </a-card>
    <!-- 新增 编辑分类 -->
    <a-modal
      v-model="showEditCat"
      :afterClose="closeModel"
      :title="!catForm.id ? '新增分类' : '修改分类'"
      @ok="editCat"
      width="700px"
    >
      <a-form-model ref="ruleForm" :model="catForm" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-form-model-item label="分类名称" prop="name">
          <a-input v-model="catForm.name" />
        </a-form-model-item>
        <a-form-model-item label="分类排序" prop="sort">
          <a-input type="number" v-model="catForm.sort" />
        </a-form-model-item>
        <a-form-model-item label="分类状态" prop="status">
          <a-radio-group v-model="catForm.status">
            <a-radio value="1"> 显示 </a-radio>
            <a-radio value="0"> 禁用 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { catList, saveCat, delCat, catStatus } from '@/api/plugin/integral'
import { STable } from '@/components'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '分类名称',
    dataIndex: 'name',
  },
  {
    title: '分类排序',
    dataIndex: 'sort',
    sorter: (a, b) => a.sort - b.sort,
  },
  {
    title: '状态',
    dataIndex: 'is_enable',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    sorter: (a, b) => a.created_at - b.created_at,
    scopedSlots: {
      customRender: 'created_at',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]
export default {
  components: {
    STable,
  },
  data() {
    return {
      queryParam: {
        name: '',
        status: '0',
      },
      columns,
      catForm: {
        id: '',
        name: '',
        sort: '',
        status: '1',
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入分类排序', trigger: 'blur' }],
        status: [{ required: true, message: '请选择分类状态', trigger: 'change' }],
      },
      // 显示新增 编辑分类
      showEditCat: false,
      // 选中行id
      selectedRowKeys: [],
    }
  },
  methods: {
    // 关闭弹窗
    closeModel() {
      this.catForm.id = ''
      this.catForm.name = ''
      this.catForm.sort = ''
      this.catForm.status = '1'
    },
    // 加载数据
    loadData(parameter) {
      let { queryParam: data } = this
      return catList({ ...parameter, ...data })
        .then((res) => {
          return res.data
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.$refs.table.localLoading = false
        })
    },
    // 点击新增 编辑分类
    editCat() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await saveCat(this.catForm)
          if (res.code == 0) {
            this.showEditCat = false
            this.$refs.table.refresh(true)
          }
        } else {
          return false
        }
      })
    },
    // 点击编辑分类
    handleEdit(record) {
      console.log(record)
      this.catForm.id = record.id
      this.catForm.name = record.name
      this.catForm.sort = record.sort
      this.catForm.status = record.is_enable
      this.showEditCat = true
    },
    // 批量操作  0 禁用 1开启 2删除
    allStatus(e) {
      let ids = this.selectedRowKeys
      const that = this
      if (!ids.length) {
        return this.$message.warning('请选择需要操作的分类')
      }
      let text = e == 0 ? '禁用' : e == 1 ? '开启' : '删除'
      this.$confirm({
        title: '是否' + text + '分类?',
        onOk() {
          if (e == 2) {
            that.deleteCat({ ids })
          } else {
            that.changeCatStatus({ status: e, ids })
          }
        },
        onCancel() {},
      })
    },
    // 改变分类状态
    async changeCatStatus(param) {
      const hide = this.$message.loading('处理中...')
      const res = await catStatus(param)
      hide()
      if (res.code == 0) {
        this.$message.success('处理成功')
        this.$refs.table.refresh()
      }
    },
    // 删除分类
    async deleteCat(param) {
      const hide = this.$message.loading('删除中...')
      const res = await delCat(param)
      hide()
      if (res.code == 0) {
        this.$message.success('删除成功')
        this.$refs.table.refresh()
      }
    },
  },
}
</script>

<style lang="less" scoped>
.status {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }
  .close {
    background-color: #ff4400;
  }
  .disabled {
    background-color: #ccc;
  }
  .open {
    background-color: #65c817;
  }
}
</style>